<template>
	<div class="chart-box">
		<!-- <el-button type="text" class="change-type" @click="changeType">{{ `${type != 'line' ? '折线图查看' : '柱状图查看'}` }}</el-button> -->
		<div class="chart" ref="chartBox"></div>
	</div>
</template>
<script>
import { formatTime } from "@/utils/tool";
export default {
	data() {
		return {
			chartData: [],
			chartObj: null,
			type: "line",
			timer: null,
		};
	},
	props: ["option_cfg", "metricData"],
	methods: {
		resize: function() {
			this.chartObj.resize();
		},
		changeType() {
			if (this.type == "bar") {
				this.type = "line";
			} else {
				this.type = "bar";
			}
			this.setOption();
		},
		async getOption() {
			let ret = await this.metricData(this.option_cfg.id, this.option_cfg.key, this.option_cfg.type);
			this.chartData = ret.data
				.sort((a, b) => a.timestamp - b.timestamp)
				.map((e) => [e.timestamp, e.value, e.smooth - 0]);
			this.setOption();
		},
		setOption() {
			console.log("===============================================");
			let xAxis = [];
			let yAxis = [];
			// console.log(yAxis.sort((a, b) => b - a))
			// let tempMax = yAxis.sort((a, b) => b - a)[0]
			// console.log("xAxis",this.xAxis)
			// console.log("yAxis",this.yAxis)
			// if(yAxis == null||typeof(yAxis) == 'undefined){
			//   yAxis=[]
			// }
			// if(xAxis == null|| xAxis == 'undefined'){
			//   xAxis=[]
			// }
			let max = Math.max.apply(null, yAxis);
			if (max == null) {
				max = 1;
			}
			max = max + max / 10;

			// if (tempMax) min = tempMax
			// if (tempMax) min = Math.ceil(tempMax*2)

			let text = this.option_cfg.key;
			let option = {
				title: {
					text,
					textStyle: {
						fontSize: "18px",
						fontWeight: 600,
						color: this.$AxisColor,
					},
				},
				xAxis: {
					type: "category",
					data: xAxis,
					axisLine: {
						//x轴线的颜色以及宽度
						lineStyle: {
							color: this.$AxisColor,
							type: "solid",
						},
					},
				},
				yAxis: {
					type: "value",
					max: max,
					splitNumber: 10,
					axisLine: {
						//x轴线的颜色以及宽度
						lineStyle: {
							color: this.$AxisColor,
							type: "solid",
						},
					},
				},
				dataZoom: [
					{
						type: "inside",
					},
				],
				color: ["#e07b52", "#f6cdb4"],
				series: [
					{
						data: yAxis,
						type: this.type,
					},
					// {
					//   data: yAxis2,
					//   type: this.type
					// }
				],
			};
			this.chartObj.clear();
			this.chartObj.setOption(option);
		},
		async refeshData() {
			let ret = await this.metricData(this.option_cfg.id, this.option_cfg.key, this.option_cfg.type);
			this.chartData = ret.data
				.sort((a, b) => a.timestamp - b.timestamp)
				.map((e) => [e.timestamp, e.value, e.smooth - 0]);
			let yAxis = this.chartData.map((e) => e[1].toFixed(2));

			let xAxis = this.chartData.map((e) => formatTime(e[0], "hh:mm:ss"));
			let option = this.chartObj.getOption();
			let max = Math.max.apply(null, yAxis);
			max = max + max / 10;
			option.series[0].data = yAxis;
			option.xAxis[0].data = xAxis;
			option.yAxis[0].max = max;
			//this.chartObj.clear()
			this.chartObj.hideLoading();
			this.chartObj.setOption(option);
		},
	},
	async mounted() {
		//this.chartData = this.option
		this.chartObj = this.$echarts.init(this.$refs.chartBox);
		//this.chartData.values && this.setOption();
		//let ret= await metricData({ id: this.option_cfg.id, key: this.option_cfg.key, type: this.option_cfg.type })
		//this.chartData = ret.data.map(e => [e.timestamp,  e.value, e.smooth - 0])
		this.setOption(); //加载数据函数
		this.refeshData();
		this.timer = setInterval(() => {
			this.refeshData();
		}, 5000);

		window.addEventListener("resize", () => {
			this.resize();
		});
	},
	beforeDestroy() {
		clearInterval(this.timer);
		this.timer = null;
		this.chartObj.dispose();
		this.chartObj.clear();
		window.removeEventListener("resize", this.resize);
	},
};
</script>
<style scoped lang="less">
.chart-box {
	height: 100%;
	width: 100%;
	padding: 10px 0 0 20px;
	box-sizing: border-box;
	position: relative;

	.change-type {
		position: absolute;
		right: 20px;
		top: 20px;
		z-index: 6;
	}

	.chart {
		height: 100%;
		width: 100%;
	}
}
</style>
